﻿
@{
    ViewData["Title"] = "页面测试";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>MailContacts</h1>

<textarea id="CodeEditor">-- SQL Mode for CodeMirror
SELECT SQL_NO_CACHE DISTINCT
		@@var1 AS `val1`, @@'val2', @@global.'sql_mode',
		1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`,
		0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`,
		DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`,
		'my string', _utf8'your string', N'her string',
        TRUE, FALSE, UNKNOWN
	FROM DUAL
	-- space needed after '--'
	# 1 line comment
	/* multiline
	comment! */
	LIMIT 1 OFFSET 0;
</textarea>
<div id="editTemplate">
    <el-row>
        <!--弹出框  邮件模板-->
        <el-dialog :visible.sync="isEditEmailTemplate" width="50%">

            <div slot="title">
                <span class="el-dialog__title"> 邮件模板</span>   <i class="cl-info"></i>
                <el-row style=" border-bottom: 1px solid #ebebeb;"></el-row>
            </div>


            <section id="myEditor">
                <div id='edit' style="margin-top:20px; ">
                    <h1>Custom Popup example</h1>
                    <p>This is an example of how to create your own popup.</p>
                </div>
            </section>

            <div slot="footer" class="dialog-footer">
                <el-row style=" border-bottom: 1px solid #ebebeb;"></el-row>
                <el-button size="small" round>确定</el-button>
                <el-button size="small" round>关闭</el-button>
            </div>


        </el-dialog>
        <!--弹出框end-->
    </el-row>

</div>

<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea id="mytextarea"></textarea>

<!-- Include Editor JS files. -->
<!-- Initialize the editor. -->

<section id="Testedit" style="width:400px;height:160px;">
    <div id='edit' style="margin-top:20px; ">
        <h1>Custom Popup example</h1>
        <p>This is an example of how to create your own popup.</p>
    </div>
</section>
@section styles{
    @*<link href="~/js/froala-editor/froala_editor.css" rel="stylesheet" />*@
    <link href="~/js/froala-editor/froala_editor.pkgd.css" rel="stylesheet" />

    <link href="~/js/codemirror/lib/codemirror.css" rel="stylesheet" />
    <link href="~/js/codemirror/addon/fold/foldgutter.css" rel="stylesheet" />
    <link href="~/js/codemirror/addon/hint/show-hint.css" rel="stylesheet" />
    <link href="~/js/codemirror/theme/neat.css" rel="stylesheet" />
}
@section scripts{
    @*<script src="~/js/froala-editor/js/froala_editor.min.js"></script>*@
    <script src="~/js/codemirror/lib/codemirror.js"></script>
    <script src="~/js/codemirror/mode/sql/sql.js"></script>
    <script src="~/js/codemirror/addon/hint/sql-hint.js"></script>
    <script src="~/js/codemirror/addon/fold/foldgutter.js"></script>
    <script src="~/js/froala-editor/froala_editor.pkgd.min.js"></script>
    <script src="~/js/froala-editor/js/languages/zh_cn.js"></script>
    <script>

        //  var alltheEdit=    new FroalaEditor("#Testedit", {
        //  toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'myButton'], ['undo', 'redo'] ],
        //  pluginsEnabled: ['customPlugin']
        //})



        let editor = new FroalaEditor("#myEditor", {
            //toolbarButtons: [
            //    ['bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL'],
            //    ['insertHTML', 'undo', 'redo', 'html']
            //],
            //quickInsertButtons: [],
            toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'fontFamily', 'fontSize',

                'color', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo',

                'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help',

                '|', 'fullscreen'],

            //['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color',

            //'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink',

            //'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll',

            //'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//显示可操作项

            // theme: "dark",//主题

            placeholder: "请填写内容",

            language: "zh_cn",//国际化

            imageUploadURL: "http://i.froala.com/upload",//上传url

            fileUploadURL: "http://i.froala.com/upload",//上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options

            quickInsertButtons: ['table', 'ul', 'ol', 'hr'],//快速插入项

            // toolbarVisibleWithoutSelection: true,//是否开启 不选中模式

            // disableRightClick: true,//是否屏蔽右击

            colorsHEXInput: false,//关闭16进制色值

            toolbarSticky: true,//操作栏是否自动吸顶

            zIndex: 99999,

            events: {

                'froalaEditor.initialized': function () {

                    console.log('initialized')

                }

            },
            froalaContent: "<p>www</p>",//默认测试文本
        });
        var editData = new Vue({
            el: "#editTemplate",
            data: {
                isEditEmailTemplate: false,
                title: "编辑",
                canUpdate: true,
                theEdit: null,

            },
            mounted() {
                console.log("执行渲染方法 mounted");
                //new FroalaEditor("#myEditor", {
                //    toolbarButtons: [['bold', 'italic', 'underline', 'strikeThrough', 'myButton'], ['undo', 'redo']],
                //    pluginsEnabled: ['customPlugin']
                //});
                //   editData.Init();
                // setInterval(function () { editData.Init(); }, 1000);
            },
            methods: {
                Init: function () {

                }
            }

        });





        var myTextArea = document.getElementById('CodeEditor');
        var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
            lineNumbers: true,
            matchBrackets: true,
            styleActiveLine: true,
            theme: "neat",
            mode: 'text/x-sql',
            readOnly: false,
            showCursorWhenSelecting: true,
          
           
        });
        myCodeMirror.setSize("auto", "300px");





    </script>
}






